<template>
  <div class="animated fadeIn">
    <!-- 待运输 2018/3/5 11:14  -->
    <Row>
      <i-col :md="24">
        <div>
          <div id="container" style="margin-bottom:10px;">
          </div>
          <div style="position:relative;">
            <Table :columns="columns7" :data="main_order_list" ref="table"></Table>
            <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                      align-items: center;
                                      justify-content: center;background: rgba(210, 216, 222, 0.5);"
                 v-if="list_loadding">
              <Spin size="large"></Spin>
              <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
            </div>
          </div>
          <Page :total="this.pageTotal" show-total @on-change="setInitPage"
                style="text-align:right;margin-top:50px"></Page>
          <!--
          <Button type="primary" size="large" @click="exportData(1)">
            <Icon type="ios-download-outline"></Icon>
            导出原始数据
          </Button>
          <Button type="primary" size="large" @click="exportData(2)">
            <Icon type="ios-download-outline"></Icon>
            导出排序和过滤后的数据
          </Button>
        -->
        </div>
      </i-col>
      <i-col :md="12">
      </i-col>
    </Row>
    <Modal v-model="detailModel" title="运单详情" width="960">
      <Tabs value="name1">
        <TabPane label="子运单详情" name="name1">
          <Table :columns="column1" :data="detailData"></Table>
        </TabPane>
      </Tabs>
    </Modal>
    <Modal v-model="sendNoticeModal" title="发送通知" @on-ok="submitSendNotice">
      <Form :model="sendNoticeForm" :label-width="150" ref="sendNoticeForm">
        <FormItem label="对位股道" prop="paraPositionTrack">
          <Select v-model="sendNoticeForm.paraPositionTrack">
            <Option v-for="item in trackOptions" :value="item" :key="item">
              {{item}}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="预计到达时间" prop="estimateArriveTime">
          <DatePicker type="datetime" placeholder="选择需求时间" v-model="sendNoticeForm.estimateArriveTime"></DatePicker>
        </FormItem>
        <template v-for="item in trackName">
          <FormItem :label="item.login_name">
            <Tree :data="fleetAddress" show-checkbox :key="item.login_name"></Tree>
          </FormItem>
        </template>
      </Form>
    </Modal>
  </div>
</template>
<script>
  import { getMainOrder, getOrderDetail } from '@api/backEnd/mainOrder'
  // import { assignmentOrder, getTrackList, getOwnFleet, getAddressList } from '@api/backEnd/station'
  import Cookies from 'js-cookie'
  // import moment from 'moment'

  export default {
    name: 'waitingForTrans',
    data () {
      return {
        assignmentModal: false,
        sendNoticeModal: false,
        detailModel: false,
        progresshow: false,
        progresscount: 0,
        progresstatus: 'active',
        progressspeed: 0,
        video_list: [],
        pageindex: 1,
        pageTotal: null,
        main_order_list: [],
        detailData: [],
        trackOptions: [],
        trackName: [],
        fleetAddress: [],
        lodding: false,
        list_loadding: false,
        address: [],
        assignForm: {
          mainOrderNo: '',
          paraPositionTime: ''
        },
        sendNoticeForm: {
          paraPositionTrack: '',
          estimateArriveTime: '',
          mainOrderNo: '',
          data: []
        },
        columns7: [
          {
            title: '联运单号',
            key: 'orderNo',
            ellipsis: 'false',
            render: (h, params) => {
              let thisdata = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '空车入线时间',
            ellipsis: 'false',
            key: 'emptyTime',
            render: (h, params) => {
              let thisdata = params.row.emptyTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '起始站',
            ellipsis: 'false',
            key: 'startStationName',
            render: (h, params) => {
              let thisdata = params.row.startStationName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '创建时间',
            key: 'createTime',
            sortable: true,
            sortType: 'desc',
            render: (h, params) => {
              let thisdata = params.row.createTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '操作',
            key: 'action',
            align: 'center',
            ellipsis: 'true',
            render: (h, params) => {
              const roles = Cookies.get('roles')
              console.log(roles)
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: (value, row) => {
                      this.detailModel = true
                      getOrderDetail(params.row).then(res => {
                        if (res.data.isSuccess === 1) {
                          console.log(res.data.data.sub)
                          this.detailData = res.data.data.sub
                        }
                      })
                    }
                  }
                }, '查看详情')
              ])
            }
          }
        ],
        column1: [
          {
            title: '联运子单号',
            ellipsis: 'false',
            key: 'orderNo',
            render: (h, params) => {
              let thisdata = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '重车出线时间',
            ellipsis: 'false',
            key: 'heavyTime',
            render: (h, params) => {
              let thisdata = params.row.heavyTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '品名',
            ellipsis: 'false',
            key: 'productName',
            render: (h, params) => {
              let thisdata = params.row.productName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '开头车号',
            key: 'startTrainNumber',
            render: (h, params) => {
              let thisdata = params.row.startTrainNumber
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }
        ]
      }
    },
    computed: {},
    methods: {
      submitSendNotice () {
      },
      remove (index) {
        this.video_list.splice(index, 1)
      },
      setInitPage (page) {
        const status = 3
        const param = { status, page }
        getMainOrder(param).then(res => {
          if (res.data.isSuccess === 1) {
            let mainOrderList = res.data.data.list
            mainOrderList.sort(function (p1, p2) {
              return new Date(p1.createTime).getTime() - new Date(p2.createTime).getTime()
            })
            this.main_order_list = mainOrderList.reverse()
            this.pageTotal = res.data.data.total
          } else {
            this.pageTotal = 0
          }
        })
        this.pageindex = page
      },
      exportData (type) {
        if (type === 1) {
          this.$refs.table.exportCsv({
            filename: '原始数据',
            columns: this.columns7,
            data: this.video_list
          })
        } else if (type === 2) {
          this.$refs.table.exportCsv({
            filename: '排序和过滤后的数据',
            original: false
          })
        }
      }
    },
    mounted () {
      const vue = this
      this.list_loadding = true
      setTimeout(function () {
        vue.list_loadding = false
      }, 2000)
      this.setInitPage(1)
    },
    components: {}
  }
</script>
<style scoped>

</style>
